<template>
	<view class="upload-content">
		<view 
			class="upload-item"
			v-for="(item, index) in imageList" 
			:key="index"
		>
			<image class="upload-img" :src="item.filePath" mode="aspectFill" @click="previewImage(index)"></image>
			<!-- 删除按钮 -->
			<image class="upload-del-btn" 
				@click.stop.prevent="showDelModal(index)" 
				src=""
				mode="scaleToFill">
			</image>
			<!-- 进度 -->
			<view class="upload-progress" v-if="item.progress < 100">{{item.progress}}%</view>
		</view>
		<!-- 新增按钮 -->
		<view class="upload-add-btn" v-if="rduLength > 0" @click="chooseImage"></view>
		
		<mix-modal ref="mixModal" title="提示" text="确定要放弃这张图片么" @onConfirm="delImage"></mix-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// imageList: []
		};
	},
	props: {
		imageList: {
			type: Array,
			default () {
				return [
					// {
					// filePath: 'https://diudiu.51vip.biz/api/upload/minio/view/zhima/QbeMrtrOReJWf025aa87d69b9c59a3eea66d8313ca7f_1616900438164.png',
					// url: 'https://diudiu.51vip.biz/api/upload/minio/view/zhima/QbeMrtrOReJWf025aa87d69b9c59a3eea66d8313ca7f_1616900438164.png',
					// progress: 100
					// },
				];
			}
		},
		count: {
			type: Number,
			default: 5 //单次可选择的图片数量
		},
		length: {
			type: Number,
			default: 1 //可上传总数量
		},
		index: {
			type: Number,
			default: 0
		},
		type: {
			type: Number,
			default: 0
		}
	},
	watch:{
		images(images){
			console.log("images changed "+JSON.stringify(images))
			this.imageList = images;
		},
		imageList(imageList){
			console.log("imageList changed "+JSON.stringify(imageList))
		}
	},
	computed: {
		rduLength(){
			return this.length - this.imageList.length;
		}
	},
	methods: {
		//选择图片
		chooseImage(){
			uni.chooseImage({
				count: this.rduLength < this.count ? this.rduLength : this.count, //最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有
				success: res=> {
					// console.log("upload images res "+JSON.stringify(res))
					this.uploadFiles(res.tempFilePaths);
				}
			});
		},
		//上传图片
		async uploadFiles(files){
			// console.log("upload images files "+JSON.stringify(files))
			// const old = this.imageList;
			const item = {
				filePath: files[0],
				progress: 0
			}
			// console.log("==uploadFiles before=="+JSON.stringify(this.imageList))
			// console.log("==uploadFiles 1=="+old.length)
			
			// console.log("==uploadFiles 2=="+this.imageList.length)
			const res = await this.$upload('mix-upload-image', 'Upload', files[0]);
			const result = JSON.parse(res);
			// this.log(">>>>>"+JSON.stringify(result));
			// this.log(">>>>>"+JSON.stringify(result.data))
			// this.log(">>>>>"+JSON.stringify(!result.data.url))
			// this.imageList.push(item);
			if(!result.data.url){
				this.$util.msg('图片上传失败，上传任务已终止');
				this.imageList.pop();
				return;
			}else{
				item.progress = 100;
				item.url = result.data.url;
				// old.push(item);
				this.imageList.push(item);
				// this.imageList = old;
				// console.log("==uploadFiles 3=="+this.imageList.length)
				this.$emit('onChange', this.imageList);
				// console.log("==uploadFiles 4=="+JSON.stringify(this.imageList))
			}
			// console.log("==uploadFiles 3=="+old.length)
			
			
			// const result = await uniCloud.uploadFile({
			// 	filePath: item.filePath,
			// 	cloudPath: + new Date() + ('000000' + Math.floor(Math.random() * 999999)).slice(-6) + '.jpg',
			// 	onUploadProgress: e=> {
			// 		item.progress = Math.round(
			// 			(e.loaded * 100) / e.total
			// 		)
			// 	}
			// });
			// if(!result.fileID){
			// 	this.$util.msg('图片上传失败，上传任务已终止');
			// 	this.imageList.pop();
			// 	return;
			// }
			// if(typeof uniCloud.getTempFileURL === 'undefined'){
			// 	//阿里云
				// item.url = result.fileID;
				// this.$emit('onChange', {
				// 	list: this.imageList,
				// 	index: this.index
				// })
			// }else{
			// 	//腾讯云
			// 	const tempFiles = await uniCloud.getTempFileURL({
			// 		fileList: [result.fileID]
			// 	})
			// 	const tempFile = tempFiles.fileList[0];
			// 	if(tempFile.code === 'SUCCESS'){
			// 		item.url = tempFile.download_url;
			// 		this.$emit('onChange', {
			// 			list: this.imageList,
			// 			index: this.index
			// 		})
			// 	}else{
			// 		this.$util.msg('图片上传失败，上传任务已终止');
			// 		this.imageList.pop();
			// 	}
			// }
			// files.shift();
			// if(files.length > 0){
			// 	this.uploadFiles(files);
			// }
		},
		//删除图片
		showDelModal(index){
			this.curIndex = index;
			this.$refs.mixModal.open();
		},
		delImage(index){
			this.imageList.splice(this.curIndex, 1);
			this.$emit('onChange', this.imageList);
			// this.$emit('onChange', {
			// 	list: this.imageList,
			// 	index: this.index
			// })
		},
		//预览图片
		previewImage(index){
			const urls = this.imageList.map(item=> item.filePath);
			uni.previewImage({
				current: index,
				urls: urls
			})
		}
	}
}
</script>

<style lang="scss">
	.upload-content{
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;
	}
	.upload-item{
		position: relative;
		width:148rpx;
		height:148rpx;
		margin-right:28rpx;
		margin-bottom:24rpx;
		
		&:nth-child(4n){
			margin-right:0;
		}
		.upload-img{
			width:100%;
			height:100%;
			border-radius:8rpx;
		}
		.upload-del-btn{
			position: absolute;
			right:-16rpx;
			top:-14rpx;
			z-index: 5;
			width:36rpx;
			height:36rpx;
			border: 4rpx solid #fff;
			border-radius: 100px;
		}
		.upload-progress{
			position: absolute;
			left:0;
			top:0;
			display:flex;
			align-items:center;
			justify-content: center;
			width:100%;
			height:100%;
			background-color: rgba(0,0,0,.4);
			color:#fff;
			font-size:24rpx;
			border-radius:8rpx;
		}
	}
	.upload-add-btn {
		position: relative;
		float:left;
		width: 148rpx;
		height: 148rpx;
		margin-bottom: 24rpx;
		z-index: 85;
		border-radius:8rpx;
		background:#f7f7f7;
		&:before,
		&:after {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			width: 4rpx;
			height: 60rpx;
			background-color: #d6d6d6;
		}
		&:after {
			width: 60rpx;
			height: 4rpx;
		}
	}

</style>
